<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">

        <div class="layui-form-item">
            <label class="layui-form-label">主播名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" placeholder="请输入主播名称" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主播身份证号</label>
            <div class="layui-input-block">
                <input type="text" name="card_num" id="card_num" class="layui-input" placeholder="请输入主播身份证" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主播电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" class="layui-input" placeholder="请输入主播电话" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主播身份证图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <input type="hidden" name="card_img" value="" id="image">
                        <img style="width: 100px;height: 100px" class="layui-upload-img" id="show_image">
                    </div>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>

<script>
    layui.use(['jquery', 'form', 'upload', 'element', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

        var uploadInst = upload.render({
            elem: '#test1'
            , url: "{:url('upload')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                console.log(res.url)
                $("#image").val(res.url)
                $("#show_image").attr('src',res.url)
                $.ajax({
                    url:"{:url('ocr')}",
                    data:{img:res.url},
                    success(res){
                        console.log(res)
                        var number = res.data.frontResult.IDNumber
                        $("#card_num").val(number)
                    }
                })
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

</script>